<template>
  <div class="yukoume-container">
    <!-- 顶部操作栏 -->
    <div class="yukoume-header">
      <div class="header-actions">
        <div class="city-selector-container">
          <button class="action-btn city-selector" @click="selectCity">
            <span class="btn-icon">📍</span>
            <span>{{ currentCityName }}</span>
            <span class="btn-arrow">▼</span>
          </button>
          <div v-if="showCitySelector" class="city-selector-panel">
            <div class="city-panel-header">
              <span>选择城市</span>
              <button @click="showCitySelector = false" class="close-btn">×</button>
            </div>
            <div class="city-search">
              <input 
                v-model="searchQuery" 
                type="text" 
                placeholder="搜索城市..."
                class="city-search-input"
              />
            </div>
            <div class="city-list">
              <div v-if="isLoadingCities" class="loading-cities">
                <div class="loading-spinner small"></div>
                <span>加载中...</span>
              </div>
              <div 
                v-for="city in filteredCities" 
                :key="city.cityCode" 
                @click="selectCityItem(city)"
                class="city-item"
                :class="{ active: cityCode === city.cityCode }"
              >
                {{ city.city }}
              </div>
              <div v-if="!isLoadingCities && filteredCities.length === 0" class="no-cities">
                {{ searchQuery ? '没有找到匹配的城市' : '暂无城市数据' }}
              </div>
            </div>
          </div>
        </div>
        <button class="action-btn refresh-btn" @click="refreshData">
          <span class="btn-icon">🔄</span>
          <span>刷新</span>
        </button>
      </div>
    </div>



    <!-- 内容区域 - 独立滚动 -->
    <div class="yukoume-content" scrollable @scroll="handleScroll">
      <!-- 加载状态 -->
      <div v-if="loading && items.length === 0" class="loading-container">
        <div class="loading-spinner"></div>
        <p>正在加载圈子动态...</p>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="error-container">
        <div class="error-icon">⚠️</div>
        <p>{{ error }}</p>
        <button @click="loadData" class="retry-btn">重试</button>
      </div>

      <!-- 空数据状态 -->
      <div v-else-if="!loading && items.length === 0" class="empty-container">
        <div class="empty-icon">🎣</div>
        <p>暂无圈子动态</p>
      </div>

      <!-- 网格布局 -->
      <div class="cards-grid" v-else>
        <div v-for="item in items" :key="item.id" class="fishing-card" @click="openDetail(item)">
          <div class="card-image">
            <img :src="getFirstImageUrl(item)" :alt="getCardTitle(item)" @error="handleImageError" />
            <div class="card-overlay">
              <div class="card-type-badge">{{ getMessageTypeText(item) }}</div>
              <h3 class="card-title">{{ getCardTitle(item) }}</h3>
              <div class="card-info">
                <span v-if="item.subtype === 'EVT_SHOW_H'" class="harvest-info">
                  {{ getHarvestInfo(item) }}
                </span>
                <span v-else-if="item.subtype === 'EVT_N_SPOT'" class="spot-info">
                  {{ getSpotInfo(item) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载状态提示 -->
      <div v-if="loading && items.length > 0" class="loading-more">
        <div class="loading-spinner small"></div>
        <span>正在加载更多动态...</span>
      </div>

      <!-- 加载完成提示 -->
      <div v-if="!loading && !hasMore && items.length > 0" class="end-message">
        <p>🎣 已加载全部 {{ items.length }} 条动态</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { invoke } from '@tauri-apps/api/core'

// 类型定义
interface MessageContent {
  circleId: string
  harvestId?: string
  pics?: string[]
  score?: number
  fishingAt?: string
  comment?: string
  fisherId?: string
  spotId?: string
  name?: string
  isPrivate?: number
  wtype?: { code: string; type: number; name: string }
  htype?: { code: string; type: number; name: string }
  fharvests?: Array<{ code: string; type: number; name: string }>
  city?: string
  isFree?: number
  stypes?: Array<{ code: string; type: number; name: string }>
  dtype?: { code: string; type: number; name: string }
  ftypes?: Array<{ code: string; type: number; name: string }>
}

interface CircleMessage {
  id: string
  circleId: string
  messageType: string
  subtype: 'EVT_SHOW_H' | 'EVT_N_SPOT'
  content: MessageContent
  timestamp: string
  sender: string
  priority: number
  cursor: string
}

// 状态管理
const items = ref<CircleMessage[]>([])
const loading = ref(false)
const error = ref('')
const hasMore = ref(true)
const isLoadingMore = ref(false)
const lastCursor = ref<string | null>(null)

// 城市选择相关
const currentCityName = ref('全国')
const cityCode = ref('1079327395934244864') // 测试用的城市代码
const showCitySelector = ref(false)
const searchQuery = ref('')

// 城市数据（从API获取）
const cities = ref<Array<{ cityCode: string; city: string }>>([])
const isLoadingCities = ref(false)

// 搜索过滤后的城市 - 现在使用后端搜索
const filteredCities = computed(() => {
  return cities.value
})

// 清理图片URL
const cleanImageUrl = (url: string): string => {
  return url.replace(/\s*`\s*|\s*'\s*"/g, '').trim()
}

// 获取第一张图片URL
const getFirstImageUrl = (item: CircleMessage): string => {
  let pics: string[] = []

  if (item.subtype === 'EVT_SHOW_H' && item.content.pics) {
    pics = item.content.pics
  } else if (item.subtype === 'EVT_N_SPOT' && item.content.pics) {
    pics = item.content.pics
  }

  if (pics && pics.length > 0) {
    return cleanImageUrl(pics[0])
  }

  return '/placeholder-fishing.jpg'
}

// 获取卡片标题
const getCardTitle = (item: CircleMessage): string => {
  return item.content.name || '未知钓点'
}

// 获取消息类型文本
const getMessageTypeText = (item: CircleMessage): string => {
  return item.subtype === 'EVT_SHOW_H' ? '晒渔获' : '发现新钓点'
}

// 获取渔获信息
const getHarvestInfo = (item: CircleMessage): string => {
  const htype = item.content.htype?.name || ''
  const harvests = item.content.fharvests || []
  const fishNames = harvests.map(h => h.name).join('、')
  return `${htype}${fishNames ? ` - ${fishNames}` : ''}`
}

// 获取钓点信息
const getSpotInfo = (item: CircleMessage): string => {
  const isFree = item.content.isFree === 1 ? '免费' : '收费'
  const isPrivate = item.content.isPrivate === 1 ? '私有' : '公开'
  return `${isFree} · ${isPrivate}`
}

// 获取城市列表 - 调用后端API
const fetchCities = async () => {
  isLoadingCities.value = true
  try {
    const response = await invoke('get_circle_cities')

    // 处理API响应格式
    if (response && Array.isArray((response as any).data)) {
      cities.value = (response as any).data as Array<{ cityCode: string; city: string }>
    } else if (Array.isArray(response)) {
      cities.value = response as Array<{ cityCode: string; city: string }>
    } else {
      console.warn('城市API响应格式未知:', response)
      cities.value = []
    }
  } catch (err) {
    console.error('获取城市列表失败:', err)
    // API调用失败时显示空列表，不显示默认城市
    cities.value = []
  } finally {
    isLoadingCities.value = false
  }
}

// 搜索城市 - 调用后端搜索API
const searchCities = async (keyword: string) => {
  if (!keyword.trim()) {
    // 如果搜索词为空，重新加载全部城市
    await fetchCities()
    return
  }

  isLoadingCities.value = true
  try {
    const response = await invoke('search_circle_cities', {
      keyword: keyword.trim()
    })

    // 处理API响应格式
    if (response && Array.isArray((response as any).data)) {
      cities.value = (response as any).data as Array<{ cityCode: string; city: string }>
    } else if (Array.isArray(response)) {
      cities.value = response as Array<{ cityCode: string; city: string }>
    } else {
      console.warn('城市搜索API响应格式未知:', response)
      cities.value = []
    }
  } catch (err) {
    console.error('搜索城市失败:', err)
    // 搜索失败时显示空列表
    cities.value = []
  } finally {
    isLoadingCities.value = false
  }
}

// 调用真实API
const fetchCircleMessages = async (): Promise<CircleMessage[]> => {
  try {
    // 确保cityCode不为空
    const currentCityCode = cityCode.value || "1079327395934244864";
    
    const params: any = {
      cityCode: currentCityCode,
      size: 20
    }

    // 如果有游标，添加分页参数
    if (lastCursor.value) {
      params.cursor = lastCursor.value
    }

    console.log('调用get_circle_messages参数:', params);
    const response = await invoke('get_circle_messages', params)

    // 处理API响应格式
    if (Array.isArray(response)) {
      return response as CircleMessage[]
    } else if (response && Array.isArray((response as any).data)) {
      return (response as any).data as CircleMessage[]
    } else {
      console.warn('API响应格式未知:', response)
      return []
    }
  } catch (err) {
    console.error('获取圈子消息失败:', err)
    throw err
  }
}

// 加载数据
const loadData = async () => {
  try {
    loading.value = true
    error.value = ''

    const data = await fetchCircleMessages()
    items.value = data

    // 更新游标用于分页（使用最后一条消息的cursor）
    if (data.length > 0) {
      lastCursor.value = data[data.length - 1].cursor
    }

    // 如果没有返回数据，说明没有更多
    if (data.length === 0) {
      hasMore.value = false
    }

  } catch (err) {
    error.value = '加载失败，请重试'
    console.error('加载数据失败:', err)
  } finally {
    loading.value = false
  }
}

// 加载更多
const loadMore = async () => {
  if (loading.value || !hasMore.value || isLoadingMore.value) {
    return
  }

  isLoadingMore.value = true

  try {
    const newData = await fetchCircleMessages()

    if (newData.length === 0) {
      hasMore.value = false
    } else {
      items.value.push(...newData)
      lastCursor.value = newData[newData.length - 1].cursor
    }

  } catch (err) {
    console.error('加载更多失败:', err)
    error.value = '加载更多失败'
  } finally {
    isLoadingMore.value = false
  }
}

// 滚动处理
const handleScroll = (event: Event) => {
  const target = event.target as HTMLElement
  const scrollTop = target.scrollTop
  const scrollHeight = target.scrollHeight
  const clientHeight = target.clientHeight

  // 当滚动到底部时加载更多
  if (scrollTop + clientHeight >= scrollHeight - 100 && hasMore.value) {
    loadMore()
  }
}

// 打开详情
const openDetail = (item: CircleMessage) => {
  console.log('打开详情:', item)
  // 这里可以跳转到详情页或打开弹窗
}

// 城市选择相关方法
const selectCity = () => {
  showCitySelector.value = !showCitySelector.value
  if (showCitySelector.value) {
    fetchCities()
  }
}

const selectCityItem = (city: { cityCode: string; city: string }) => {
  currentCityName.value = city.city
  cityCode.value = city.cityCode
  showCitySelector.value = false
  
  // 保存选择的城市到本地存储
  localStorage.setItem('selectedCity', JSON.stringify({
    cityCode: city.cityCode,
    city: city.city
  }))
  
  refreshData()
}


// 刷新数据
const refreshData = () => {
  items.value = []
  lastCursor.value = null
  hasMore.value = true
  loadData()
}

// 处理图片加载失败
const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement

  // 避免无限循环：检查是否已经处理过
  if (img.hasAttribute('data-error-handled')) {
    return
  }

  // 标记为已处理
  img.setAttribute('data-error-handled', 'true')

  // 使用简单的SVG占位图，避免外部文件依赖
  const placeholderSvg = `data:image/svg+xml;base64,${btoa(`
    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200">
      <rect width="300" height="200" fill="#f0f0f0"/>
      <text x="150" y="100" text-anchor="middle" dy=".3em" fill="#999" font-size="14">
        图片加载失败
      </text>
    </svg>
  `)}`

  img.src = placeholderSvg
}

// 强制刷新滚动容器
const forceScrollRefresh = () => {
  const scrollContainer = document.querySelector('.yukoume-content') as HTMLElement
  if (scrollContainer) {
    // 临时设置scrollTop来触发浏览器重新计算滚动区域
    const currentScrollTop = scrollContainer.scrollTop
    scrollContainer.style.overflow = 'hidden'
    scrollContainer.offsetHeight // 强制重新计算
    scrollContainer.style.overflow = 'auto'
    scrollContainer.scrollTop = currentScrollTop
  }
}

// 监听搜索框变化
watch(searchQuery, (newKeyword) => {
  searchCities(newKeyword)
})

onMounted(async () => {
  // 从本地存储加载选择的城市
  const savedCity = localStorage.getItem('selectedCity')
  if (savedCity) {
    try {
      const cityData = JSON.parse(savedCity)
      currentCityName.value = cityData.city
      cityCode.value = cityData.cityCode
    } catch (error) {
      console.warn('从本地存储加载城市失败:', error)
    }
  }
  
  await loadData()
  
  // 使用nextTick确保DOM完全渲染后强制刷新滚动
  await nextTick()
  forceScrollRefresh()
  
  // 额外的延迟确保一切都已就绪
  setTimeout(() => {
    forceScrollRefresh()
  }, 100)
})
</script>

<style scoped>
.yukoume-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  display: flex;
  flex-direction: column;
}

.city-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.city-list {
  padding: 8px 0;
}

.city-item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-primary);
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--border);
}

.city-item:last-child {
  border-bottom: none;
}

.city-item:hover {
  background: var(--bg-tertiary);
  color: var(--accent-primary);
}

.city-item.active {
  background: var(--bg-card);
  color: var(--accent-primary);
  font-weight: 600;
}

.loading-cities,
.no-cities {
  padding: 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.yukoume-header {
  flex-shrink: 0;
  height: 60px;
  background: var(--bg-header);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
}

.page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.action-btn:hover {
  background: var(--bg-card);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

.btn-icon {
  font-size: 14px;
}

.btn-arrow {
  font-size: 10px;
  opacity: 0.7;
}

.city-selector {
  min-width: 80px;
}

.city-selector-container {
  position: relative;
}

.city-selector-panel {
  position: absolute;
  top: calc(100% + 8px); /* 按钮下方8px间距 */
  left: 0;
  width: 200px;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  z-index: 1001;
  max-height: 300px;
  overflow-y: auto;
  transform: translateY(0);
}

.city-search {
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.city-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
  background: var(--bg-input);
  color: var(--text-primary);
}

.city-search-input:focus {
  border-color: var(--accent-primary);
  background: var(--bg-input);
  box-shadow: 0 0 0 2px var(--accent-primary-alpha);
}

.city-search-input::placeholder {
  color: var(--text-secondary);
}

.yukoume-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  box-sizing: border-box;
  background: var(--bg-primary);
  backdrop-filter: blur(12px);
  /* 确保滚动容器有明确的高度 */
  min-height: 0;
  /* 启用硬件加速和强制滚动行为 */
  transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
  /* 自定义滚动条 */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* WebKit 滚动条样式 */
.yukoume-content::-webkit-scrollbar {
  width: 8px;
}

.yukoume-content::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.yukoume-content::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 4px;
  transition: background 0.3s ease;
}

.yukoume-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

.yukoume-content.scrollable {
  padding: 24px;
}

.page-header {
  margin-bottom: 32px;
  text-align: center;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

/* 加载状态 */
.loading-container,
.error-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top: 3px solid var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.error-container .error-icon,
.empty-container .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.retry-btn {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 16px;
}

.retry-btn:hover {
  background: var(--accent-primary-hover);
  transform: translateY(-1px);
}

/* 卡片网格 */
.content-area {
  min-height: 100%;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
  width: 100%;

  .fishing-card {
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

  .fishing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent-primary);
  }

  .card-image {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
  }

  .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .fishing-card:hover .card-image img {
    transform: scale(1.05);
  }

  .card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, var(--bg-overlay));
    padding: 16px;
  }

  .card-title {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
  }

  .card-type-badge {
    display: inline-block;
    background: var(--accent-primary);
    color: var(--text-inverse);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .card-info {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.2;
  }

  .harvest-info,
  .spot-info {
    display: block;
    opacity: 0.9;
  }

  /* 加载更多 */
  .load-more-container {
    text-align: center;
    margin-top: 40px;
  }

  .load-more-btn {
    background: transparent;
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
    padding: 12px 32px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .load-more-btn:hover:not(:disabled) {
    background: var(--accent-primary);
    color: var(--text-inverse);
    transform: translateY(-1px);
  }

  .load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .loading-dots {
    display: inline-flex;
    gap: 4px;
  }

  .loading-dots span {
    width: 6px;
    height: 6px;
    background: var(--accent-primary);
    border-radius: 50%;
    animation: loadingDots 1.4s ease-in-out infinite;
  }

  .loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
  }

  .loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes loadingDots {

    0%,
    80%,
    100% {
      opacity: 0.3;
    }

    40% {
      opacity: 1;
    }
  }

  .end-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 14px;
  }

  .end-message p {
    margin: 0;
    opacity: 0.7;
  }

  /* 滚动加载提示样式 */
  .loading-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 20px;
    color: var(--accent-primary);
    font-size: 14px;
    font-weight: 500;
  }

  .loading-more .loading-spinner.small {
    width: 20px;
    height: 20px;
    border-width: 2px;
  }

  .scroll-trigger {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }

  .scroll-trigger:hover {
    opacity: 1;
  }

  .end-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 500;
  }

  .end-message p {
    margin: 0;
    opacity: 0.8;
  }

  /* 内容区域 - 确保正常滚动行为 */
  .yukoume-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    background: var(--bg-primary);
    backdrop-filter: blur(12px);
    padding: 24px;
    /* 确保滚动容器有正确的最小高度 */
    min-height: 0;
  }

 

  /* 响应式设计 */
  @media (max-width: 1200px) {
    .cards-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (max-width: 992px) {
    .cards-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 768px) {
    .yukoume-header {
      padding: 0 16px;
      height: 50px;
    }

    .yukoume-content {
      padding: 16px;
    }

    .city-selector-panel {
      top: 50px;
      width: 180px;
    }

    .cards-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .page-title {
      font-size: 18px;
    }

    .action-btn {
      padding: 6px 12px;
      font-size: 12px;
    }

    .btn-icon {
      font-size: 12px;
    }
  }

  @media (max-width: 480px) {
    .yukoume-header {
      padding: 0 12px;
    }

    .header-actions {
      gap: 8px;
    }

    .city-selector-panel {
      top: 50px;
      left: 5px;
      width: 160px;
    }

    .action-btn {
      padding: 6px 10px;
      font-size: 11px;
    }

    .action-btn span:not(.btn-icon) {
      display: none;
    }

    .cards-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .card-image {
      height: 180px;
    }
  }
}
</style>
